<template>
  <div class="floorBox">

    <div style="padding-top: 0.5vh;width: 99%;margin: 0 auto;height: auto;color: white;font-size: 1.8vh;text-align: left;">
      <span style="float: left;margin-left: 1vh;border-left: 6px #08C3D4 solid;"><span style="margin-left: 1vh;">窗户信息</span></span>

      <div style="margin-top: 5vh;">
        <el-form ref="windowData"  :rules="windowRules"  label-width="100px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="windowData" >

          <el-form-item  label="窗户名称" prop="window_name">
            <el-input v-model="windowData.window_name"></el-input>
          </el-form-item>

          <el-form-item  label="位置" prop="window_location">
            <el-input v-model="windowData.window_location">

            </el-input>
          </el-form-item>

          <el-form-item  label="长度" prop="window_lenght">
            <el-input v-model="windowData.window_lenght">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
            </el-input>
          </el-form-item>

          <el-form-item  label="宽度" prop="window_width">
            <el-input v-model="windowData.window_width">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
            </el-input>
          </el-form-item>

          <el-form-item  label="厚度" prop="window_thick">
            <el-input v-model="windowData.window_thick">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
            </el-input>
          </el-form-item>

          <el-form-item  label="面积" prop="window_area">
            <el-input v-model="windowData.window_area">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
            </el-input>
          </el-form-item>

          <el-form-item  label="材质" prop="window_structure">
            <el-select v-model="windowData.window_structure" placeholder="">
              <el-option
                v-for="item in windowStructureOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>


        </el-form>

        <div style="width: 100%;margin-top: 0vh;">
          <div style="float: right;  position: relative;">
            <el-button size="small" type="primary" icon="el-icon-connection" @click="cloneWindow">复制窗户</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="removeWindow">删除窗户</el-button>
          </div>
        </div>

      </div>





    </div>


  </div>






</template>

<script>
  export default {
    data() {
      return {
        windowStructureOption: [{
          value: '1',
          label: '单层玻璃'
        }, {
          value: '2',
          label: '双层玻璃'
        }, {
          value: '3',
          label: '三层玻璃'
        }],
        windowRules: {
          window_name: [
            { required: true, message: '请输入窗户名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_location: [
            { required: true, message: '请输入窗户位置', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_width: [
            { required: true, message: '请输入窗户宽度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_lenght: [
            { required: true, message: '请输入窗户长度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_area: [
            { required: true, message: '请输入窗户面积', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_thick: [
            { required: true, message: '请输入窗户厚度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          window_structure: [
            { required: true, message: '请输入窗户材质', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    props: {
      windowData : {
        window_id : '',
        window_name : '', //窗户名称
        window_location : '', //窗户位置
        window_width : '', //窗户宽度
        window_lenght : '',//窗户高度
        window_thick : '',//窗户厚度
        window_area : '',//窗户面积
        window_structure : '',//窗户材质
      },
      index : ''
    },
    mounted() {
      var code = "windowStructure";
      //初始化页面下拉
      this.$http.post("/iepsapi/fhfz/sceneSettings/retrievePageOption?code="+code, {}).then((res) => {
        var option = res.data;
        this.windowStructureOption = option;
      });

    },
    methods: {
      validateWindow : function(){
        var flag;
        this.$refs['windowData'].validate((valid) => {
          flag = valid;
        });
        return flag;
      },
      /* 复制窗户 */
      cloneWindow : function(){
        this.$emit('cloneWindow', this.index)
      },
      /* 删除窗户 */
      removeWindow : function(){
        this.$emit('removeWindow', this.index)
      },

    }
  }
</script>



<style scoped >

  .floorBox{
    width: 100%;
    margin-top: 1vh;
    background: inherit;
    background: rgba(115,135,213, 0.4);
    color: white;
    min-height: 30vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(115,135,213, 1);
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .floorInfo{
    padding-top: 0.5vh;
    width: 99%;
    margin: 0 auto;
    height: 6vh;
    color: white;
    font-size: 1.8vh;
    text-align: left;
    float: left;
  }

  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{
    position: relative;
    width: 100%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    min-height: 45vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{
    position: relative;
    width: 100%;
    min-height: 25vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
